<template>
	<div class="layout-pd">
    <div class="container">
      <div class="search-btns">
        <div class="btns">
          <el-button size="default" color="#18bc9c" @click="addFn">+ 添加</el-button>
        </div>
        <div class="search">
          <el-input v-model="state.formData.keyword" placeholder="搜索" class="input-with-select" >
            <template #append>
              <el-button :icon="Search" @click="searchFn" />
            </template>
          </el-input>
        </div>
      </div>
      <div class="tables">
        <YxTable
        :header-cell-style="{ background: '#f5f7fa' }"
        border
        :selection="false"
        :isSerialNum="false"
        :data="state.tableData"
        :columnData="state.columnData"
        :isPage="true"
        :total="state.total"
        @size-change="sizeChange"
        @current-change="currentChange"
        :showOperator="true"
      >
        <template v-slot:operate="{ row }">
          <el-button type="primary" text size="small">编辑</el-button>
          <el-popconfirm title="确定删除吗？" @confirm="operateFn('del', row)">
						<template #reference>
							<el-button type="primary" text size="small">删除</el-button>
						</template>
					</el-popconfirm>
        </template>
      </YxTable>
      </div>
    </div>
    <AddNavTitle ref="addNavTitleRef"></AddNavTitle>
	</div>
</template>

<script setup name="navBarTitleIndex">
import { Search } from '@element-plus/icons-vue'
import { } from '/@/api/project/index';
import { navTitleColumn } from '/@/commmon/column';
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
const YxTable = defineAsyncComponent(() => import('/@/components/YxTable/index.vue'));
const AddNavTitle = defineAsyncComponent(() => import('/@/views/startfab/pageManage/navBarTitle/addNavTitle.vue'));
const addNavTitleRef = ref()
const state = reactive({
  formData: {
    keyword: ''
  },
  columnData: navTitleColumn,
  total: 0,
  pages: {
    page: 1,
    limit: 10
  },
  tableData: [],
})
const addFn = () => {
  addNavTitleRef.value.openDialog('add')
}
const getData = () => {

}
const currentChange = (val) =>{
	state.pages.page = val
  searchFn()
}
const sizeChange = (val) =>{
	state.pages.limit = val
  searchFn()
}
const searchFn = () => {
  getData()
}
onMounted(() => {
  searchFn()
})
</script>

<style scoped lang="scss">
.container {
  background: #FFFFFF;
  padding: 15px;
  ::v-deep .search-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-input-group__append {
      padding: 0px 15px;
      .el-icon {
        color: #333333;
        margin-right: 0px;
      }
    }
    .el-button {
      color: #FFFFFF;
    }
  }
  .tables {
    margin-top: 10px;
  }
}
</style>
